<template>
	<view class="cell-item" :class="{'bordertop': borderTop,'borderbottom': borderBottom}">
		<view class="left-box">
			<view class="must-icon" v-if="important == true">
				*
			</view>
			<view class="title">
				{{title}}
			</view>
		</view>
		<view class="right-box" :class="{'right-scroll' : type== 'personal'}">
			<view class="placeholder" v-if="type== 'option' && value == '' || type == 'personal' && List.length == 0  && !radiovalue.userName">
				{{placeholder}}
			</view>
			<view class="value" v-if="type== 'option' && value != ''">
				{{value}}
			</view>
			<scroll-view class="value scroll-box" scroll-x v-if="type== 'personal' && (List.length > 0 || radiovalue.userName)">
				<view class="" v-if="radiovalue.userName">
					{{radiovalue.userName}}
				</view>
				<view class="tag-box">
					<view class="tag-item" v-for="(item,index) in List" :key="item.id" v-if="List.length > 0">
							{{item.userName}}
					</view>
				</view>
			</scroll-view>
			<view class="value" v-if="type== 'input'">
				<input class="input" v-if="disabled == false" type="text" @input="inputChange" :placeholder="placeholder" :value="value" />
				<view class="input" v-if="disabled == true">
					{{value == '' ? placeholder : value}}
				</view>
			</view>
			<image v-if="type == 'option' || type == 'personal'" src="/static/image/more_right_icon.png" class="right-icon" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{ // 标题
				type:String,
				default:''
			},
			name:{ // 名称（用于form返回名称）
				type:String,
				default:''
			},
			disabled:{ // 是否禁用input框
				type:Boolean,
				default:false,
			},
			important:{ // 是否必填项
				type:Boolean,
				default:false,
			},
			placeholder:{ // 提示内容
				type:String,
				default:'请选择'
			},
			borderTop:{ // 上框线条
				type:Boolean,
				default:false,
			},
			borderBottom:{ // 下框线条
				type:Boolean,
				default:false,
			},
			List:{ // 标签列表
				type:Array,
				default:[],
			},
			radiovalue:{ // 选择框内容
				type:Object,
				default:{}
			},
			value:{ // 显示内容
				type:String,
				default:''
			},
			type:{ // 显示类型（input：输入框类型；option:选择框选中项显示类型；personal：选择人员显示类型）
				type:String,
				default:'option'
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			/**
			 *  用于点击触发事件
			 */
			selectTap:function(){
				this.$emit('tap');
			},
			/**
			 * 输入框改变触发事件
			 */
			inputChange:function(e){
				this.$emit('input',{name:this.name,value:e.target.value});
			}
		}
	}
</script>

<style>

</style>
